<!--  -->
<script setup>
import SimpleInput from '@/components/input/SimpleInput.vue'
import SubmitBtn from '@/components/button/SubmitBtn.vue'
import { ref } from 'vue'
import { useBreadsStore } from '@/stores'
import Tip from '@/components/tip'
import { updateUserAPI } from '@/apis/user'

const props = defineProps(['userInfo'])

const { setBreadCrumbs } = useBreadsStore()
setBreadCrumbs([
  { title: '账号设置', path: '/users/settings' },
  { title: '个人资料' }
])

const form = ref({
  displayName: props.userInfo.user.displayName,
  username: props.userInfo.user.username,
  intro: props.userInfo.user.intro,
  avatar: ''
  // site: props.userInfo.user.site
})

function changeAvatar() {
  Tip.warn('功能已关闭')
}

function submit() {
  Tip.warn('功能已关闭')
  console.log(form.value)
}

</script>

<template>
  <div class="view-container user-settings-form">
    <h1>个人资料</h1>
    <div class="label">显示名称</div>
    <SimpleInput v-model="form.displayName" />
    <div class="label">名称 <span class="desc">用户可以通过 "@用户名" 来提及你。</span></div>
    <SimpleInput v-model="form.username" />
    <div class="label">头像</div>
    <div class="avatar" @click="changeAvatar">+</div>
    <div class="label">关于我 <span class="desc">选填</span></div>
    <textarea v-model="form.intro"></textarea>
    <!-- <div class="label">网站 <span class="desc">选填</span></div>
    <SimpleInput /> -->
    <div class="form-btn">
      <SubmitBtn @click="submit">保存</SubmitBtn>
    </div>
  </div>
</template>

<style scoped lang="scss">
@import url('./style.scss');

.view-container {

  input,
  textarea {
    padding: 4px 11px;
    font-size: 14px;
    line-height: 1.5;
    color: #444c3f;
    outline: none;
    border: 1px solid #9cb294;
    background-color: var(--bgc-02);
    border-radius: 2px;
  }

  textarea {
    min-height: 200px;
    height: auto;
    resize: vertical;
  }

  .avatar {
    width: 100px;
    height: 100px;
    border: 1px solid #9cb294;
    background-color: var(--bgc-02);
    border-radius: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #4c753e;
    font-weight: 200;
    font-size: 25px;
    cursor: pointer;
  }
}
</style>
